<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><!--引入semanticUI-->
    <link rel="stylesheet" type="text/css" href="../../static/css/myUse.css" th:href="@{/css/myUse.css}">

</head>
<body>

    <!--导航部分-->
    <nav class="ui inverted attached segment">
        <div class="ui container">
            <!--导航栏-->
            <!--stackable是为了适配移动端-->
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui teal header item">YwrbyBlog管理界面</h2>

                <a href="/admin/blogs" class="item m-mobile-hide m-item"><i class="home icon"></i> Blogs</a> <!--首页-->
                <a href="/admin/tags" class="item m-mobile-hide m-item"><i class="idea icon"></i> Tags</a> <!--时间线 归档-->
                <a href="#" class="item m-mobile-hide m-item"><i class="info icon"></i> About</a> <!--关于我-->

                <div class="right item m-mobile-hide m-item">
                    <div class="ui icon input transparent inverted">
                        <input type="text" placeholder="Search...">
                        <i class="search icon link"></i>
                    </div>
                </div>
            </div>
        </div>
        <a class="menu toggle ui black button icon m-right-top m-mobile-show">
            <i class="icon sidebar"></i>
        </a>
    </nav>

    <!--管理界面-->
    <div class="m-padded-tb-large">
        <div class="ui container">
            <div class="ui top attached secondary segment">
                <h2>标签状态管理</h2>
            </div>
            <div class="ui attached segment">
                <table class="ui striped table center aligned">
                    <thead>
                    <tr>
                        <th>Tag Name</th>
                        <th>Operate</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>John Lilki</td>
                        <td>
                            <button class="ui primary button">编辑</button>
                            <button class="ui button">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>Jamie Harington</td>
                        <td>
                            <button class="ui primary button">编辑</button>
                            <button class="ui button">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>Jill Lewis</td>
                        <td>
                            <button class="ui primary button">编辑</button>
                            <button class="ui button">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>John Lilki</td>
                        <td>
                            <button class="ui primary button">编辑</button>
                            <button class="ui button">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>John Lilki</td>
                        <td>
                            <button class="ui primary button">编辑</button>
                            <button class="ui button">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>Jamie Harington</td>
                        <td>
                            <button class="ui primary button">编辑</button>
                            <button class="ui button">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>Jill Lewis</td>
                        <td>
                            <button class="ui primary button">编辑</button>
                            <button class="ui button">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>John Lilki</td>
                        <td>
                            <button class="ui primary button">编辑</button>
                            <button class="ui button">删除</button>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <th colspan="2">
                            <div class="ui left floated pagination menu">
                                <a class="icon item">
                                    <i class="left chevron icon"></i>
                                </a>
                                <a class="item">1</a>
                                <a class="item">2</a>
                                <a class="item">3</a>
                                <a class="item">4</a>
                                <a class="icon item">
                                    <i class="right chevron icon"></i>
                                </a>
                            </div>

                            <div class="ui right floated small primary labeled icon button ">
                                <i class="edit icon"></i> 添加标签
                            </div>
                        </th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <!--页脚部分-->
    <footer  class="ui inverted vertical segment"  th:replace="_bottom :: bottom" >
        <!--center aligned保证所有条目居中显示-->
        <div class="ui container center aligned">
            <!--inverted表示颜色反转，divided表示按照给定大小显示分界线，二者共同作用显示反色分界线-->
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <img src="../../static/img/mycode.png" alt="" style="width: 100px">
                </div>

                <div class="four wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a class="item" href="#">【Blog】Test1</a>
                        <a class="item" href="#">【Blog】Test2</a>
                        <a class="item" href="#">【Blog】Test3</a>
                    </div>
                </div>

                <div class="four wide column">
                    <h4 class="ui inverted header">联系我</h4>
                    <div class="ui inverted link list">
                        <a class="item" href="#">Tel: 187xxxx3839</a>
                        <a class="item" href="#">Email: ywrby@test.cn</a>
                    </div>
                </div>

                <div class="five wide column">
                    <h4 class="ui inverted header">关于我</h4>
                    <p class="ui inverted m-opacity-mini m-text-thin m-text-spaced m-text-lined">
                        I am a Student majoring in CS at SWU. If you have any questions about the computer, You can contact me by the way beside
                    </p>
                </div>


            </div>
            <!--分割线-->
            <div class="ui inverted section divider"></div>
            <p class=" m-opacity-mini m-text-thin m-text-spaced m-text-lined">©2020 - 2021 By Ywrby</p>
        </div>
    </footer>

    <div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <!--jquery-->
        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <!--semanticUI-->
        <script src="../../static/lib/editormd/editormd.js" th:src="@{/lib/editormd/editormd.js}"></script>
    </div>

    <!--定义汉堡按键实现汉堡菜单-->
    <script>
        $(".menu.toggle").click(function (){
            $(".m-item").toggleClass("m-mobile-hide");
        })
    </script>
</body>
</html>